<template>
    <div class="repeat-scroll-box" ref="el_box">
        <div
            class="repeat-scroll-content-box"
            :style="{animationDuration:speed+'s'}"
        >
            <div 
                ref="el_slot"
            >
                <slot></slot>
            </div>
            <div 
                v-show="speed!=0"
            >
                <slot></slot>
            </div>
        </div>        
    </div>
</template>
<script>
    export default {
        name: 'RepeatScroll',
        components: {},
        props: [],
        data() {
            return {
                speed:0,
            }
        },
        computed: { //计算属性

        },
        watch: {  //监听器

        },
        methods: {
            init(){
                let {
                    el_box:{
                        clientHeight:wrapH,
                    },
                    el_slot:{
                        offsetHeight:contentH,
                    }
                } = this.$refs;
                this.speed = contentH > wrapH ? (contentH / 15) : 0;        
            },  
        },
        created(){

        }, 
        mounted(){
            this.init();
        }, 
        beforeUpdate(){
        }, 
        updated(){
            this.init();
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.repeat-scroll-box{
    width:100%;
    height:100%;
    overflow:hidden;
}
@keyframes rotateAnimation{
    0%   {
        transform: translateY(0);
        -ms-transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
        -ms-transform: translateY(-50%);
    }
}
.repeat-scroll-content-box{
    animation: rotateAnimation linear infinite;
    -webkit-animation: rotateAnimation linear infinite;
}
.repeat-scroll-box:hover .repeat-scroll-content-box{
    animation-play-state:paused;
    -webkit-animation-play-state:paused;
}
</style>
